<template>
	<div class="">
		<CommonTitle titleName="正式项目基本信息">
			<template #rightCnBox v-if="isShow()">
				<el-button
					@click="projectProposal(formInline)"
          class="button_cancel m-r10"
					style="margin-left: auto;"
					>查看议题请示</el-button
				>
				<el-button
					@click="projectApprove(formInline)"
					class="button_cancel"
					>查看决策会议名</el-button
				>
				<el-button v-if="false">编辑</el-button>
			</template>
		</CommonTitle>
		<div class="content m-t20">
			<el-form
				:model="formInline"
				ref="formInlineRef"
				class="demo-form-inline"
				label-width="180px"
				:disabled="true"
			>
				<el-row>
					<el-col :span="8">
						<el-form-item label="项目名称">
							<el-input
								v-model="formInline.projectName"
								placeholder="项目名称"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="项目编码">
							<el-input
								v-model="formInline.projectCode"
								placeholder="项目编码"
							/>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="8" v-if="projectType != 3">
						<el-form-item label="任务来源">
							<el-input v-model="formInline.projectName" placeholder="" />
						</el-form-item>
					</el-col> -->
					<el-col :span="8">
						<el-form-item label="关联项目集">
							<el-select
								v-model="formInline.projectSetId"
								clearable
								:disabled="type == 1"
								placeholder="关联项目集"
							>
								<el-option
									v-for="item in state.projectSetIdList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="项目分类">
							<el-select
								v-model="formInline.projectTypeId"
								clearable
								placeholder=""
							>
								<el-option
									v-for="item in state.typeList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="业务单元">
							<el-select
								v-model="formInline.businessUnit"
								clearable
								placeholder="业务单元"
							>
								<el-option
									v-for="item in businessUnitArr"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="计划实施时间范围">
							<el-date-picker
								v-model="formInline.time"
								@change="handelChangeTime"
								type="datetimerange"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								format="YYYY/MM/DD"
								value-format="YYYY-MM-DD"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="项目位置">
							<el-input v-model="formInline.address"> </el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="项目详细地址">
							<el-input v-model="formInline.streetName"> </el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="col_h" label="拟计划总投额和实际总投额">
							<el-input v-model="formInline.projectActual"> </el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-if="projectType == 3">
						<el-form-item label="项目类型" prop="">
							<el-select
								v-model="formInline.projectCategory"
								clearable
								placeholder="项目类型"
							>
								<el-option value="1" label="公司自建"></el-option>
								<el-option value="2" label="政府投资"></el-option>
								<el-option value="3" label="代建项目"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="项目立项部门" prop="">
							<el-select
								v-model="formInline.responsibleDepartmentId"
								clearable
								placeholder="项目立项部门"
								@change="departmentIdChange(formInline.responsibleDepartmentId)"
							>
								<el-option
									v-for="item in state.allDepartmentList"
									:key="item.departmentId"
									:label="item.departmentName"
									:value="item.departmentId"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="项目负责人" prop="">
							<el-select
								v-model="formInline.responsibleUserId"
								clearable
								:disabled="type == 1"
								placeholder="项目负责人"
								@change="streerTypeChange"
							>
								<el-option
									v-for="item in state.departmentPersonList"
									:key="item.userId"
									:label="item.userName"
									:value="item.userId"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="8" v-if="projectType != 3">
						<el-form-item label="立项会议名称" prop="projects">
							<el-input v-model="formInline.projectAmount"> </el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="8">
						<el-form-item label="所属业态" prop="typeOfBusiness">
							<el-select
									v-model="formInline.typeOfBusiness"
									clearable
									placeholder="所属业态"
							>
								<el-option
										v-for="item in state.typeofBusinessList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="总面积(m²)" prop="projectArea">
							<el-input  v-model="formInline.projectArea" placeholder="请输入总面积" @input="formInline.projectArea=limitInputNum(formInline.projectArea,10,4,true)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="政府项目" prop="isGovernment">
							<el-radio-group v-model="formInline.isGovernment" class="ml-4">
								<el-radio :label="0" size="large">否</el-radio>
								<el-radio :label="1" size="large">是</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="项目摘要" prop="">
							<el-input
								v-model="formInline.projectSummary"
								show-word-limit
								type="textarea"
							>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="项目创建时间" prop="">
							<el-input v-model="formInline.createTime"> </el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="项目创建人" prop="">
							<el-input v-model="formInline.createUserName"> </el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</div>
	<!-- 立项议题 -->
	<preliminaryCom :type="projectType" ref="preliminary"></preliminaryCom>
	<!-- 立项审批单 -->
	<preliminaryspDialog ref="preliminarysp"></preliminaryspDialog>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import {
	ElForm,
	ElRow,
	ElCol,
	ElButton,
	ElSelect,
	ElDatePicker,
	ElFormItem,
	ElOption,
	ElRadioGroup,
	ElRadio
} from "element-plus";
import CommonTitle from "@/components/CommonTitle.vue";
import { businessUnitArr } from "@/common/dict/dictCollect.js";
import PreliminaryCom from "@/views/constructionProjectManage/preliminaryProject/components/preliminaryDialog.vue";
import PreliminaryspDialog from "@/views/constructionProjectManage/preliminaryProject/components/preliminaryspDialog.vue";
import {
	projectApi,
	projectListApi,
	projectConfigApi,
	qualitySupervision,
	department,
} from "@/api/project";
import {getURLhandler} from "@/views/constructionProjectManage/static/utools";
import {useRoute} from "vue-router";
import {limitInputNum} from "@/common/utils/GlobalUtils";

const route = useRoute();
const props = defineProps({
	projectId: {
		type: String,
		default: "",
	},
	projectType: {
		type: String,
		default: "",
	},
});

const state = reactive({
	typeofBusinessList: [
		{
			label: '养老',
			value: '1'
		},
		{
			label: '教育',
			value: '2'
		},
		{
			label: '医疗',
			value: '3'
		},
		{
			label: '农贸',
			value: '4'
		},
		{
			label: '综合体',
			value: '5'
		},
		{
			label: '绿道',
			value: '6'
		},
		{
			label: '文体',
			value: '7'
		},
		{
			label: '子公司',
			value: '8'
		},
		{
			label: '其他',
			value: '9'
		}
	],
	projectSetIdList: [],
	typeList: [],
	departmentPersonList: [],
	allDepartmentList: [],
});
const formInline = ref({});
const handel = () => {};
const handleCommand = () => {
	projectListApi.getprojectByid(props.projectId).then((res) => {
		const { code, data, msg } = res;
		if (code == 200) {
      formInline.value = data;
      formInline.value.projectActual = `${formInline.value.projectAmount || 0}/${formInline.value.realProjectAmount || 0}`;
			emits("emitFormInline", formInline.value);
			formInline.value.time = [
				formInline.value.predictStartTime,
				formInline.value.predictEndTime,
			];
		}
	});
};
const emits = defineEmits(["emitFormInline"]);

const handelChangeTime = (e) => {
	if (e && e.length > 0) {
		formInline.value.predictStartTime = e[0];
		formInline.value.predictEndTime = e[1];
	}
};
let preliminary = ref(null);
let preliminarysp = ref(null);
const departmentIdChange = (id) => {
	formInline.value.responsibleUserId = "";
};
// 监听 项目负责部门 调用 项目负责人
watch(
	() => formInline.value.responsibleDepartmentId,
	(value) => {
		if (value) {
			getLeaderByDepartmentId(value);
		}
	}
);
// 获取项目集
const getpublicProject = () => {
	projectConfigApi.getProjectSets().then((res) => {
		if (res.code == 200) {
			state.projectSetIdList = res.data.map((item) => {
				return {
					label: item.projectSetName,
					value: item.projectSetId,
				};
			});
		}
	});
};
// 获取所有部门
const getAllDepartments = () => {
	department.getAllDepartments().then((res) => {
		const { code, data, msg } = res;
		if (code == 200) {
			state.allDepartmentList = data;
		}
	});
};
// 获取项目 负责人
const getLeaderByDepartmentId = (responsibleDepartmentId) => {
	department.getUserByDepartmentId(responsibleDepartmentId).then((res) => {
		const { code, data, msg } = res;
		if (code == 200) {
			state.departmentPersonList = data;
		}
	});
};
const getTypeList = () => {
	const type = "10" + props.projectType;
	projectConfigApi.getTypeList(type).then((res) => {
		if (res.code == 200) {
			state.typeList = res.data.map((item) => {
				return {
					label: item.typeName,
					value: item.projectTypeId,
				};
			});
		}
	});
};

//立项审批
const projectApprove = (row) => {
	preliminarysp.value.state.type = "查看";
	preliminarysp.value.state.disabled = true;
	preliminarysp.value.state.centerDialogVisible = true;
	preliminarysp.value.getBfbfProjectApprovalFormView(row);
};
// 议题
const projectProposal = (row) => {
	preliminary.value.state.disabled = true;
	preliminary.value.state.type = "查看";
	preliminary.value.state.centerDialogVisible = true;
	preliminary.value.state.projectId = row.projectId;
	preliminary.value.state.projectTypeId = row.projectTypeId;
	preliminary.value.getBfProjectSubjectMeetingView(row);
};

/**
 * 是否显示
 */
const isShow = () => {
	let isPresetPlan = getURLhandler(route.path).isPresetPlan;
	let isGovernment = getURLhandler(route.path).isGovernment;
	if(isPresetPlan && isPresetPlan === '1'){ // 预设计划
		return false;
	}
	if(isGovernment && isGovernment === '1'){
		return false;
	}
	return true;
}

onMounted(() => {
	handleCommand();
	getpublicProject();
	getAllDepartments();
	getTypeList();
});
defineExpose({
	formInline,
});
</script>
<style lang="scss" scoped>
.content {
	width: 100%;
	min-height: 504px;
	border-radius: 10px;
	border: 1px solid #e3e7f1;
	padding: 40px 40px 40px 0px;
}
.el-select {
	width: 100%;
}
</style>
